<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            float: left;
            border-spacing: 0;
        }

        .input {
            float: left;
            margin-left: 20px;
        }

        input {
            outline: none;
            margin-bottom: 20px;
        }

        td,
        th {
            text-align: center;
        }

        .del{
            background: #accbcc;
        }

        .del:hover{
            background: #acabcc;
        }

    </style>
</head>

<body>
    <table border="1" style="width: 800px;" id="tabs">
        <tr>
            <th>id</th>
            <th>名称</th>
            <th>性别</th>
            <th>学校</th>
            <th>专业</th>
            <th>操作</th>
        </tr>
        <!-- <tr>
            <td>1</td>
            <td>老婆饼</td>
            <td>man</td>
            <td>gc</td>
            <td>前端开发</td>
            <td class="del">删除</td>
        </tr> -->
    </table>

    <div class="input" id="inp">
        名称：<input type="text" value=""><br>
        性别：<input type="text" value=""><br>
        学校：<input type="text" value=""><br>
        专业：<input type="text" value=""><br>
        <button style="margin-left: 80px;" id="btn">添加</button>
    </div>

    <script>
        var btn = document.getElementById("btn");
        var inp = document.getElementById("inp").getElementsByTagName("input");
        var tabs = document.getElementById("tabs").getElementsByTagName("tbody")[0];
        var trs = tabs.children;

        // “添加”按钮的出发事件
        btn.onclick = function () {
            var datalist = [inp[0].value, inp[1].value, inp[2].value, inp[3].value]; //将用户输入的数据放入数组中
            var tr = document.createElement("tr"); //点击时，先创建一行列表
            tabs.appendChild(tr); //将列表插入表格中

            var id = document.createElement("td"); // 创建将在列表首格添加id的格子
            var idText = document.createTextNode(trs.length - 1); // 创建首格的文本
            id.appendChild(idText); //将文本放入首格
            tr.appendChild(id); // 再将首格添加到此行中

            // 将数组中用户输入的数据遍历到添加的行中
            for (var i = 0; i < datalist.length; i++) {
                var td = document.createElement("td"); //同样的创建格子
                var text = document.createTextNode(datalist[i]); //再将数组中对应的文本创建出来
                td.appendChild(text); //再将文本插入格子
                tr.appendChild(td); //再将格子插入行中
            }


            var del = document.createElement("td"); //再最后一格添加删除按钮
            del.className = "del" 
            var delText = document.createTextNode("删除"); 
            del.appendChild(delText); 
            tr.appendChild(del);
            del.style.cursor = "pointer";

            //给删除按钮触发事件
            del.onclick = function () {
                tabs.removeChild(tr);
            }

            for (var j = 0; j < datalist.length; j++) {
                inp[j].value = "";
            }
        }






    </script>
</body>

</html>